package com.pj.compose.ui.page.widget

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.pj.compose.R
import com.pj.compose.ui.compose.AppTopBarColumn

@Composable
fun RadiusImageViewPage(navController: NavController) {
    AppTopBarColumn(
        title = "RadiusImageView",
        backClick = { navController.popBackStack() }) {
        Column(
            Modifier
                .fillMaxSize()
                .background(MaterialTheme.colorScheme.background)
                .padding(15.dp)
                .verticalScroll(rememberScrollState()),
        ) {

            Text(
                text = "裁切为圆形 + 边框 + 点击效果",
                color = Color.Black,
                fontSize = 16.sp,
                modifier = Modifier.padding(15.dp)
            )

            Image(
                painter = painterResource(id = R.mipmap.example_image6),
                contentDescription = "",
                modifier = Modifier
                    .size(200.dp)
                    .clip(
                        RoundedCornerShape(100.dp)
                    )
                    .border(1.dp, Color.LightGray)
                    .clickable { }, contentScale = ContentScale.FillHeight
            )

            Text(
                text = "裁切为圆形 + 边框 + 点击效果",
                color = Color.Black,
                fontSize = 16.sp,
                modifier = Modifier.padding(15.dp)
            )

            Image(
                painter = painterResource(id = R.mipmap.example_image6),
                contentDescription = "",
                modifier = Modifier
                    .size(width = 200.dp, height = 300.dp)
                    .clip(
                        RoundedCornerShape(150.dp)
                    )
                    .border(1.dp, Color.LightGray)
                    .clickable { }, contentScale = ContentScale.FillHeight
            )
            Text(
                text = "裁切为圆角矩形 + 边框 + 点击效果",
                color = Color.Black,
                fontSize = 16.sp,
                modifier = Modifier.padding(15.dp)
            )

            Image(
                painter = painterResource(id = R.mipmap.example_image6),
                contentDescription = "",
                modifier = Modifier
                    .size(width = 200.dp, height = 300.dp)
                    .clip(
                        RoundedCornerShape(20.dp)
                    )
                    .border(1.dp, Color.LightGray)
                    .clickable { }, contentScale = ContentScale.FillHeight
            )
        }
    }
}